<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: hongweixun
 * @Date: 2022-07-14 15:28:18
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-03-25 11:02:46
-->
<template>
    <div class="AttendBox" :style="'height:' + attendDataHeight + 'px;'">
        <div :class="attendData.length == 9 ? 'cyclegraph cyclegraph2' : 'cyclegraph'" ref="cyclegraphRef"
            :style="'padding-top:' + nowSize(attendData.length == 9 ? 12 : attendData.length == 8 ? 20 : attendData.length == 6 ? 35 : 30) + 'px;padding-bottom:' + nowSize(attendData.length == 9 ? 12 : attendData.length == 8 ? 20 : attendData.length == 6 ? 35 : 30) + 'px;'">
            <div id="container1" :style="'width:' + nowSize(184) + 'px;height:' + nowSize(184) + 'px;'"></div>
            <div class="left-row-box">
                <div class="list" v-for="(item, index) in attendData" :key="index">
                    <span :style="'background:' + color[index] + ';'"></span>
                    <span>{{ item.name }}占比</span>
                    <span>{{ item.percent }}%</span>
                </div>
            </div>
        </div>
        <div class="cycleInfo"
            :class="attendData.length == 7 ? 'cycleInfo2' : attendData.length == 6 ? 'cycleInfo1' : attendData.length == 9 ? 'cycleInfo4' : 'cycleInfo3'"
            :style="'height:' + listInfHeight + 'px;'">
            <div class="name">{{ selectRuleName }}：{{ addTime }}</div>
            <div class="items" @click="toDetail(item)" v-for="(item, index) in attendData" :key="index">
                <div :style="item.name.includes('缺勤') ? 'color:#FF4F27;' : ''">{{ item.value }}</div>
                <div>{{ item.name }}(人)</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        // 床位集合
        attendData: {
            type: Array,
            default: []
        },
        color: {
            type: Array,
            default: []
        },
        addTime: {
            type: String,
            default: ''
        },
        selectRuleName: {
            type: String,
            default: ''
        },
        attendDataHeight: {
            type: Number,
            default: 0
        },
        school_id: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            listInfHeight: 0,
        }
    },
    watch: {
        attendData(value) {
            setTimeout(() => {
                this.listInfHeight = this.attendDataHeight - this.$refs.cyclegraphRef.clientHeight
            }, 0);
        },
        attendDataHeight(value) {
            setTimeout(() => {
                this.listInfHeight = this.attendDataHeight - this.$refs.cyclegraphRef.clientHeight
            }, 0);
        }
    },
    methods: {
        toDetail(item) {
            this.$emit('ShowDialog2', item.status, item.value, 2)
        },
        // 让文字根据屏幕自适应
        nowSize(val) {
            var nowClientHeight = document.documentElement.clientHeight
            return val * (nowClientHeight / 1080)
        }
    },
    async mounted() {
    }
}
</script>
<style lang="less" scoped>
.AttendBox {
    padding: 0 30px;
}

.cyclegraph2 {}

.cyclegraph {
    display: flex;
    align-items: center;
    // padding: 40px 0 30px 0;
    justify-content: space-between;

    #container1 {
        max-width: 184px;
        max-height: 184px;
        padding: 0 17px;
    }

    .left-row-box {
        // flex: 1;
        margin-right: 10%;

        .list {
            width: 100%;
            display: flex;
            align-items: center;
            // margin-bottom: 5px;
            padding: 5px 0;
            text-align: right;

            span {
                display: inline;
            }

            span:first-of-type {
                width: 9px;
                height: 9px;
                border-radius: 50%;
                display: inline-block;
                margin-right: 15px;
            }

            span:nth-of-type(2) {
                font-size: 13px;
                font-weight: bold;
                color: #FFFFFF;
                display: inline-block;
                margin-right: 22px;
                width: 80px;
                text-align: left;
            }

            span:nth-of-type(3) {
                font-size: 16px;
                font-weight: bold;
                color: #FFFFFF;
            }
        }
    }

}

.cycleInfo {
    overflow-y: scroll;

    .name {
        font-size: 16px;
        font-weight: 400;
        color: #FFFFFF;
    }

    .items {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        width: 140px;
        padding: 13px 0;
        flex-flow: column;
        background: rgba(24, 133, 200, 0.2);
        border-radius: 10px;
        margin: 20px 22px 0 0;
        cursor: pointer;

        div {
            flex: 1;

        }

        div:first-of-type {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        div:last-of-type {
            font-size: 14px;
            font-weight: 400;
        }
    }




}

.cycleInfo1 {

    .items:nth-of-type(4),
    .items:nth-of-type(7) {
        margin-right: 0px;
    }
}

.cycleInfo2 {

    .items:nth-of-type(4),
    .items:nth-of-type(8) {
        margin-right: 0px;
    }

    .items:nth-of-type(5),
    .items:nth-of-type(6),
    .items:nth-of-type(7),
    .items:nth-of-type(8) {
        width: 100px;
    }
}

.cycleInfo3 {
    .items {
        width: 100px;
    }

    .items:nth-of-type(5),
    .items:nth-of-type(9) {
        margin-right: 0px;
    }
}

.cycleInfo4 {
    .items {
        width: 100px;
        margin-top: 15px;

    }

    .items:nth-of-type(6),
    .items:nth-of-type(7),
    .items:nth-of-type(8),
    .items:nth-of-type(9),
    .items:nth-of-type(10) {
        width: 81px;
        margin-right: 15px;

    }

    .items:nth-of-type(5),
    .items:nth-of-type(10) {
        margin-right: 0px;
    }
}
</style>